import React from 'react';
import './App.css';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import Login from 'pages/Login';
import Layout from 'components/common/Layout';
import Translate from 'pages/Translate';
import UserManage from 'pages/UserManage';
const routes = [
    {
        path: '/login',
        component: Login,
        exact: 'true',
    },
    {
        path: '/',
        component: Layout,
        children: [
            {
                path: '/translate',
                component: Translate,
            },
            {
                path: '/userManage',
                component: UserManage
            }
        ]
    }
]
function RouteWithSubRoutes(route: any) {
    return (
        <Route
            path={route.path}
            render={(props) => <route.component {...props} routes={route.routes}>
                {/* { route.path === '/' && <Redirect to="/home" /> } */}
                {route.children ? route.children.map((child: any, i: any) => (
                    /** 递归传入子组件 */
                    <RouteWithSubRoutes key={i} {...child} />
                )) : ''}
            </route.component>}
        />
    );
}
function App() {
  return (
    <div className="App">
    <Router>
        <div style={{ width: '100%' }}>
            <Switch>
                {routes.map((route, i) => (
                    <RouteWithSubRoutes key={i} {...route} />
                ))}
            </Switch>
        </div>
    </Router>
</div>
  );
}

export default App;
